<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .carousel {
            position: relative;
            width: 600px;
            /* 轮播图宽度 */
            overflow: hidden;
            /* 隐藏溢出部分 */
            margin: 50px auto;
            /* 居中显示 */
            border: 2px solid #ccc;
            /* 边框 */
            border-radius: 10px;
        }

        .carousel-images {
            display: flex;
            transition: transform 0.5s ease;
            /* 动画效果 */
        }

        .carousel-images img {
            width: 600px;
            /* 每张图片的宽度 */
            height: auto;
            /* 自适应高度 */
        }

        .prev,
        .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.8);
            border: none;
            cursor: pointer;
            font-size: 24px;
            padding: 10px;
            border-radius: 5px;
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }
    </style>
</head>

<body>

    <div class="carousel">
        <div class="carousel-images">
            <img src="https://picsum.photos/600/300?=1" alt="Image 1">
            <img src="https://picsum.photos/600/300?=2" alt="Image 2">
            <img src="https://picsum.photos/600/300?=3" alt="Image 3">
        </div>
        <button class="prev" onclick="prevSlide()">&#10094;</button>
        <button class="next" onclick="nextSlide()">&#10095;</button>
    </div>

    <script>
        let currentIndex = 0;

        function showSlide(index) {
            const slides = document.querySelectorAll('.carousel-images img');
            const totalSlides = slides.length;

            // 确保索引在有效范围内
            if (index >= totalSlides) {
                currentIndex = 0;
            } else if (index < 0) {
                currentIndex = totalSlides - 1;
            } else {
                currentIndex = index;
            }

            const offset = -currentIndex * 600; // 600为图片宽度
            document.querySelector('.carousel-images').style.transform = `translateX(${offset}px)`;
        }

        function nextSlide() {
            showSlide(currentIndex + 1);
        }

        function prevSlide() {
            showSlide(currentIndex - 1);
        }

        // 自动切换
        setInterval(nextSlide, 3000); // 每3秒切换
    </script>

</body>

</html>